<template>
  <div class="box">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <img class="icon2" src="@/assets/PC/金融服务/组31.png" alt="" />
          </div>
          <span>企业认证</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <img class="icon2" src="@/assets/PC/金融服务/组31.png" alt="" />
          </div>
          <span>填写企业信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组35.png" alt="" />
            <img class="icon2" src="@/assets/PC/金融服务/组31.png" alt="" />
          </div>
          <span>填写买方信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组36.png" alt="" />
            <img class="icon2" src="@/assets/PC/金融服务/组31.png" alt="" />
          </div>
          <span>填写账款信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/005.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
    </div>
    <!-- <h3 class="unit">单位：元</h3> -->
    <div class="f2">
      <ul class="ul">
        <li>
          <el-form ref="forms" :model="form" label-width="150px" :rules="rules">
            <el-form-item label="买方企业名称" prop="a">
              <el-input v-model="form.a" placeholder=""></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label="上年度采购额" prop="b">
              <el-input
                class="bbbb"
                @blur="costChangeB"
                @focus="
                  () => {
                    this.form.b = remoney(this.form.b);
                  }
                "
                @input="limitInput($event, 'b')"
                v-model="form.b"
                placeholder=""
              >
                <template #append>
                  <el-select
                    class="bbbb"
                    v-model="select.b1"
                    placeholder="请选择"
                  >
                    <el-option label="人民币" value="人民币"></el-option>
                    <el-option label="美元" value="美元"></el-option>
                    <el-option label="欧元" value="欧元"></el-option>
                    <el-option label="英镑" value="英镑"></el-option>
                    <el-option label="日元" value="日元"></el-option>
                    <el-option label="港币" value="港币"></el-option>
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="forms" :model="form" label-width="150px" :rules="rules">
            <el-form-item label="合作年限（年）" prop="c">
              <el-input
                v-model="form.c"
                placeholder=""
                oninput="value=value.replace(/[^0-9.]/g,'')"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label="本年度累计采购额" prop="d">
              <el-input
                class="bbbb"
                @blur="costChangeD"
                @focus="
                  () => {
                    this.form.d = remoney(this.form.d);
                  }
                "
                @input="limitInput($event, 'd')"
                v-model="form.d"
                placeholder=""
              >
                <template #append>
                  <el-select
                    class="bbbb"
                    v-model="select.d1"
                    placeholder="请选择"
                  >
                    <el-option label="人民币" value="人民币"></el-option>
                    <el-option label="美元" value="美元"></el-option>
                    <el-option label="欧元" value="欧元"></el-option>
                    <el-option label="英镑" value="英镑"></el-option>
                    <el-option label="日元" value="日元"></el-option>
                    <el-option label="港币" value="港币"></el-option>
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </li>
        <li style="margin-left: -18px">
          <el-form ref="forms" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="是否上市" prop="e">
              <el-select v-model="form.e" placeholder="请选择">
                <el-option key="14" label="请选择" value=""></el-option>
                <el-option key="1" label="是" value="1"></el-option>
                <el-option key="2" label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form label-width="150px" :model="form" :rules="rules">
            <el-form-item label="最近一次采购日期" prop="f">
              <el-date-picker
                :clearable="false"
                v-model="form.f"
                type="date"
                style="width: 235px"
                size="large"
                value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="forms" :model="form" label-width="150px" :rules="rules">
            <el-form-item label="是否提供近3年财报" prop="g">
              <el-select v-model="form.g" placeholder="请选择">
                <el-option key="14" label="请选择" value=""></el-option>
                <el-option key="1" label="是" value="1"></el-option>
                <el-option key="2" label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label="最近一次采购总额" prop="h">
              <el-input
                class="bbbb"
                @blur="costChangeH"
                @focus="
                  () => {
                    this.form.h = remoney(this.form.h);
                  }
                "
                @input="limitInput($event, 'h')"
                v-model="form.h"
                placeholder=""
              >
                <template #append>
                  <el-select
                    class="bbbb"
                    v-model="select.h1"
                    placeholder="请选择"
                  >
                    <el-option label="人民币" value="人民币"></el-option>
                    <el-option label="美元" value="美元"></el-option>
                    <el-option label="欧元" value="欧元"></el-option>
                    <el-option label="英镑" value="英镑"></el-option>
                    <el-option label="日元" value="日元"></el-option>
                    <el-option label="港币" value="港币"></el-option>
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label="所属地区" prop="i">
              <el-select v-model="form.i" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label=" " prop="">
              <el-input style="visibility: hidden"></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
    </div>
    <!-- 上一步/保存/提交 按钮 -->
    <div class="submit">
      <button class="btn btns" @click="goLast()">上一步</button>
      <button
        class="btn btn3"
        @click="goNextFlow()"
        v-bind:class="{
          actives: submitMessage == '提交中',
        }"
      >
        {{ submitMessage }}
      </button>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from "@/utils";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      submitMessage: "下一步",
      loading: false,
      radio: "",
      isLock: false,
      procedureId: "", // 产品ID状态变量
      productcode: "", //产品编号
      productname: "", //产品名称
      index: "",
      c1: false,
      form: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        f: "",
        g: "",
        h: "",
        i: "",
        applyid: "",
        kjid: "",
      },
      select: {
        b1: "人民币",
        d1: "人民币",
        h1: "人民币",
      },
      value1: [],
      options: [
        {
          label: "美国",
          value: "美国",
        },
        {
          label: "英国",
          value: "英国",
        },
        {
          label: "法国",
          value: "法国",
        },
        {
          label: "德国",
          value: "德国",
        },
        {
          label: "加拿大",
          value: "加拿大",
        },
        {
          label: "比利时",
          value: "比利时",
        },
        {
          label: "澳大利亚",
          value: "澳大利亚",
        },
        {
          label: "奥地利",
          value: "奥地利",
        },
        {
          label: "丹麦",
          value: "丹麦",
        },
        {
          label: "芬兰",
          value: "芬兰",
        },
        {
          label: "爱尔兰",
          value: "爱尔兰",
        },
        {
          label: "日本",
          value: "日本",
        },
        {
          label: "荷兰",
          value: "荷兰",
        },
        {
          label: "挪威",
          value: "挪威",
        },
        {
          label: "瑞典",
          value: "瑞典",
        },
        {
          label: "瑞士",
          value: "瑞士",
        },
        {
          label: "新西兰 ",
          value: "新西兰 ",
        },
        {
          label: "墨西哥",
          value: "墨西哥",
        },
        {
          label: "葡萄牙",
          value: "葡萄牙",
        },
        {
          label: "新加坡",
          value: "新加坡",
        },
        {
          label: "斯洛文尼亚",
          value: "斯洛文尼亚",
        },
        {
          label: "中国香港",
          value: "中国香港",
        },
        {
          label: "韩国",
          value: "韩国",
        },
        {
          label: "西班牙",
          value: "西班牙",
        },
        {
          label: "意大利",
          value: "意大利",
        },
        {
          label: "中国台湾",
          value: "中国台湾",
        },
        {
          label: "波兰",
          value: "波兰",
        },
        {
          label: "智利",
          value: "智利",
        },
        {
          label: "捷克",
          value: "捷克",
        },
        {
          label: "斯洛伐克",
          value: "斯洛伐克",
        },
        {
          label: "匈牙利",
          value: "匈牙利",
        },
        {
          label: "南非",
          value: "南非",
        },
        {
          label: "厄瓜多尔",
          value: "厄瓜多尔",
        },
        {
          label: "阿联酉",
          value: "阿联酉",
        },
        {
          label: "菲律宾",
          value: "菲律宾 ",
        },
        {
          label: "其他",
          value: "其他",
        },
      ],
      // 用户填写资料表格
      addform: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        f: "",
        g: "",
        h: "",
        i: "",
        j: "",
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        c: [{ required: true, message: " ", trigger: "blur" }],
        d: [{ required: true, message: " ", trigger: "blur" }],
        e: [{ required: true, message: " ", trigger: "blur" }],
        f: [{ required: true, message: " ", trigger: "blur" }],
        g: [{ required: true, message: " ", trigger: "blur" }],
        h: [{ required: true, message: " ", trigger: "blur" }],
        i: [{ required: true, message: " ", trigger: "blur" }],
      },
    };
  },

  // 生命周期方法
  mounted() {
    // 从路由地址中获取产品ID,保存到状态变量中
    this.procedureId = localStorage.getItem("productcodeId");
    this.productcode = localStorage.getItem("productcode");
    this.productname = localStorage.getItem("productname");
    this.form.kjid = localStorage.getItem("kjid");
    this.form.applyid = localStorage.getItem("applyid");
  },
  methods: {
    // 上一步
    goLast() {
      this.$router.go(-1);
    },
    // 前往下一个流程， 调用产品申请1接口将客户填写的数据返回至后端
    async goNextFlow() {
      if (this.submitMessage == "提交中") return;
      let { a, c, e, f, g, i, applyid, kjid } = this.form;
      let { b, d, h } = this.addform;
      let { b1, d1, h1 } = this.select;
      if (
        a.trim() == "" ||
        b.trim() == "" ||
        c.trim() == "" ||
        d.trim() == "" ||
        e.trim() == "" ||
        f.trim() == "" ||
        g.trim() == "" ||
        h.trim() == "" ||
        i.trim() == ""
      )
        return ElMessage.error("请输入内容");
      this.submitMessage = "提交中";
      let params = {
        purchasersentname: a,
        previousamount: b + " " + b1,
        cooperation: c,
        cumulativeamount: d + " " + d1,
        listed: e,
        purchasedate: f,
        financial: g,
        purchasetotalamount: h + " " + h1,
        affiliatingarea: i,
        applyId: applyid,
        kjid: kjid,
      };
      let url = "/api/hubeibusienss/addckblrzs";
      let data = await myPostFetch(url, params);
      if (data.code == 100) {
        localStorage.setItem("applyid", data.data.applyid);
        localStorage.setItem("kjid", data.data.id);

        this.$router.push(`/ckblrz3`);
        this.submitMessage = "下一步";
      } else {
        this.submitMessage = "下一步";
      }
    },

    // 表单格式转换
    costChangeB(e) {
      let a = Number(e.target.value);
      a = a.toFixed(2);
      if (a == "NaN") return (this.form.b = "");
      this.addform.b = this.form.b;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.form.b = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.form.b = this.fmoney(this.form.b);
    },
    costChangeD(e) {
      let a = Number(e.target.value);
      a = a.toFixed(2);
      if (a == "NaN") return (this.form.d = "");
      this.addform.d = this.form.d;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.form.d = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.form.d = this.fmoney(this.form.d);
    },
    costChangeH(e) {
      let a = Number(e.target.value);
      a = a.toFixed(2);
      if (a == "NaN") return (this.form.h = "");
      this.addform.h = this.form.h;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.form.h = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.form.h = this.fmoney(this.form.h);
    },
    // 票面金额
    limitInput(value, name) {
      this.addform[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == "" || s == null || (s == undefined) | isNaN(Number(s))) {
        return s;
      }
      s = Number(s) ? Number(s) : s;
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      var l = s.split(".")[0].split("").reverse();
      var r = s.split(".")[1];
      var t = "";
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      if (n > 0) {
        r = "." + r;
      } else if (n == 0) {
        r = "";
      }
      let returnT = t.split("").reverse().join("") + r;
      //负数处理
      if (returnT[0] == "-" && returnT[1] == ",") {
        returnT = "-" + returnT.substring(2);
      }
      return returnT;
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = "";
      if (s) {
        str = String(s).replace(/,/g, "");
      }
      if (s && (s + "").indexOf(".") > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, "");
      } else if (s && Number(str)) {
        return str;
      } else {
        return s;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          .icon1 {
            width: 40px;
          }
          .icon2 {
            width: 120px;
            height: 3px;
            margin: 0 8px;
          }
        }
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -19px;
          margin-top: 3px;
        }
      }
    }
  }
  .unit {
    z-index: 999;
    position: relative;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      left: 537px;
      top: 75px;
    }
    left: 537px;
    top: 55px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 14px;
    color: #606266;
  }
  .f2 {
    margin-top: 5%;
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      align-items: cen;
      li {
        position: relative;
        width: 100%;
        margin-bottom: 18px;
        height: 50px;
        display: flex;
        justify-content: center;
        .message {
          margin-top: -11px;
          font-size: 12px;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
      }
    }
  }
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: 5px 0 5px 0;
    cursor: pointer;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 34px;
      background: #0a7be0;
      border-radius: 4px;
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 300;
      color: #ffffff;
      margin-right: 30px;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
    .btns {
      background: #a4a4a4;
    }
  }
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 320px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep(.bbbb .el-input__inner) {
  width: 200px;
}
::v-deep(.el-input__wrapper) {
  padding: 1px 10px;
}
::v-deep(.bbbb .el-select .el-input input) {
  width: 100px;
}

::v-deep(.el-input__prefix) {
  position: absolute;
  right: 5px;
}
/* 时间选择器 */
::v-deep(.el-input--large .el-input__wrapper) {
  padding: 1px 10px 1px 11px;
}
</style>
<style lang="scss"></style>
